<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp" %>
<!DOCTYPE HTML>
<html ng-app>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <title>${title}</title>
    <%@ include file="/WEB-INF/jsp/commons/meta.jsp" %>
    <link href="${ctx}/resources/new/style.css" type="text/css" rel="stylesheet"/>

</head>
<body>
<script>
    $(document).ready(function () {
        //聚焦第一个输入框
        $("#name").focus();
        //为inputForm注册validate函数
        $("#inputForm").validate({
            rules: {
                "department.id": "required",
                mName: "required",
                saleUser: "required",
                shop: "required",
                salePrice: "required"
            }
        });
    });
</script>
<style>
    .salebox {
        text-align: center;
    }

    #salebox {
        margin: auto;
        width: 90%;
        margin-bottom: 20px;
    }

    #salebox th {
        text-align: right;
    }

    #searchBox {
        margin: 15px auto;
    }
</style>
<form id="inputForm" class="well form-inline" action="${ctx}/adoms/shopSalesRecord/sale" method="post">
    <input type="hidden" name="id" value="${shopSalesRecord.id}"/>
    <table class="table table-striped table-bordered table-condensed">
        <tr>
            <th align="center">
                <h4>${USER.department.name}奶粉销售控制台</h4>
            </th>
        </tr>
        <tr>
            <td align="center" class="salebox well">
                <div id="searchBox">
                    <i class="icon-qrcode"></i>
                    商品二维码:
                    <input id="qrCode" class="input-medium search-query span4" name="qrCode" type="text"
                           maxlength="80"/>
                    <button class="btn btn-info" id="query" type="button">查询</button>
                    <input class="btn" type="reset" value="清空数据"/>
                </div>
                <table class="table table-condensed table-bordered table-condensed" id="salebox">
                    <tr>
                        <th class="span2" valign="top">商品详情:</th>
                        <td colspan="3" id="gdetail">
                            <span class="tBlue">请录入商品二维码进行查询</span>
                        </td>
                    </tr>
                    <tr>
                        <th>商品名称:</th>
                        <td colspan="3">
                            <input id="mName" name="mName" maxlength="200" type="text"/>
                            <input id="goodsId" name="goods.id" type="hidden" size="30" maxlength="80"/>
                        </td>
                    </tr>
                    <tr>
                        <th>所属部门:</th>
                        <td>
                            <select name="department.id">
                                <option value="${USER.department.id }">${USER.department.name }</option>
                            </select>
                        </td>
                        <th>销售金额:</th>
                        <td>
                            <input id="mPrice" name="salePrice" type="text" class="span2" maxlength="80"/>
                            元
                        </td>
                    </tr>
                    <tr>
                        <th>销售店名:</th>
                        <td>
                            <input id="shop" name="shop" type="text" value="${USER.department.name}" size="30"
                                   maxlength="80"/>
                        </td>
                        <th>销售员:</th>
                        <td>
                            <input id="saleUser" name="saleUser" type="text" value="${USER.name}" size="30"
                                   maxlength="80"/>
                        </td>
                    </tr>
                    <tr>
                        <th valign="top">备注:</th>
                        <td colspan="3">
                            <textarea id="memo" name="memo" rows="4" class="span6"></textarea>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center">
                <input class="btn btn-primary span2" type="submit" value="提 交"/>
            </td>
        </tr>
    </table>
</form>
<script>
    $(function () {
        $("#query").click(function () {
            $.post("${ctx}/adoms/goods/goodsDetail", {
                qr: function () {
                    return $("#qrCode").val();
                }
            }, function (data) {
                $("#gdetail").html(data);
                if ($("[name=goodsId]").val() > 0) {
                    $("#mName").val($("[name=mName]").val());
                    $("#mPrice").val($("[name=mPrice]").val());
                    $("#goodsId").val($("[name=goodsId]").val());
                } else {
                    if ($("[name=boxId]").val() > 0) {
                        $("#gdetail").html("<span class='tRed'>请扫描单个商品的听（盒）码！</span>");
                    } else {
                        $("#gdetail").html("<span class='tRed'>尚未查询到任何数据，请检查所录入的二维码是否正确！(或该商品已售)</span>");
                    }
                }
            }, 'html');
        });
        $("input:reset").click(function () {
            $("#gdetail").html("<span class='tBlue'>请录入商品二维码进行查询</span>");
        });
        $("#qrCode").keypress(function (e) {
            if (e.keyCode == 13) {
                $("#query").click();
                return false;
            }
        });
    });
</script>
<c:if test="${msg != null}">
    <script>
        $(function () {
            msgAlert.show("${msg}");
        });
    </script>
</c:if>
</body>
</html>